import IntegrationTable, {
	IntegrationTableProps,
} from "@/components/IntegrationTable";
import { ProColumns } from "@ant-design/pro-table";
import React, { useEffect, useState } from "react";
import { Button, Card, Row, Col, Statistic, Tabs, notification } from "antd";
import {
	ordinate,
	communityStatistics,
	regionData,
	regionCommunity,
} from "./service";
import { getArray } from "phinney-toolkit";
import { Map, Marker, Markers, Polygon } from "react-amap";
import styles from "./index.css";
import { EnvironmentOutlined } from "@ant-design/icons";
import { history, useHistory } from "umi";
const CommunityList: React.FC<any> = () => {
	// 组件是否已经卸载
	let isUnMounted = false;
	const [ordinateList, setOrdinateList] = useState<any>([]);
	//小区数据
	const [communityDate, setCommunityDate] = useState<any>({});
	//围栏数据
	const [communityPolygon, setCommunityPolygon] = useState<any>([]);
	//经纬度范围  默认为郑州市
	const [centerSize, setcenterSize] = useState<any>([113.625351, 34.746303]);
	const [zoomSize, setZoomSize] = useState<any>(12);

	const handeleClick = async (item: any) => {
		const res = await regionCommunity({
			pageIndex: "1",
			pageSize: "99",
			regionId: history.location?.query?.id,
			businessStatus: 1,
			managerStatus: 1,
		});

		setOrdinateList(res.data.records);
		if (!res.data.records[0].points) return;
		setcenterSize(res.data.records[0].points);
	};

	// 初始化加载数据
	useEffect(() => {
		handeleClick(1);
		return () => {
			isUnMounted = true;
		};
	}, []);

	return (
		<div>
			<Card bordered={false} hoverable>
				<div
					className="container"
					id="container"
					style={{ width: "100%", height: 800 }}
				>
					<Map
						version="1.4.4"
						amapkey="10c01e3af3272d167f7ab9880eb137c5"
						useAMapUI
						zoom={zoomSize}
						center={centerSize}
						// center={[113.688145, 34.795439]}
						plugins={["ToolBar"]}
						resizeEnable={true}
						mapStyle={"amap://styles/6211b93913da10dfdbfd307d2edc004e"}
						// 2389FF
					>
						<Polygon
							path={communityPolygon}
							zIndex={50}
							style={{
								strokeColor: "#2389FF",
								fillOpacity: "0.1",
								fillColor: "#2389FF",
								extData: "solid",
							}}
						></Polygon>
						{ordinateList.map((item: any, index: any) => {
							return (
								<Marker
									key={index}
									events={{
										click: (MapsOption: any, marker: any) => {
											if (!item.points) return;
											setcenterSize(item.points);
											setZoomSize(0);
											setZoomSize(18);
										},

										mouseover: (MapsOption: any, marker: any) => {
											if (!item.specShapeArrays) return;
											setCommunityPolygon(item.specShapeArrays);
										},
										mouseout: () => {
											setCommunityPolygon([]);
										},
									}}
									content={`<div class=${styles.info}>${item.managerName}-${item.communityPeopleNum}人-${item.communityBuildingNum}栋-${item.communityHouseNum}户</div>`}
									useCluster
									position={[Number(item.lon), Number(item.lat)]}
								/>
							);
						})}
						{/* <Marker position={[113.636975, 34.728297]}  (",") />
						<Marker position={[113.661181, 34.726167]} /> */}
					</Map>
				</div>
			</Card>
		</div>
	);
};

export default CommunityList;
